<template>
  <a-modal
    :bodyStyle="{height: modalHeight()}"
    :centered="true"
    :title="title"
    :visible="visible"
    :width="modalWidth()"
    @cancel="handleCancel"
    class="update-modal"
  >
    <template slot="footer">
      <a-button key="cancel" style="float: left" @click="handleCancel">
        取消
      </a-button>
      <a-button key="submit" type="primary" @click="next">
        {{ nextText }}
      </a-button>
    </template>


    <div :style="modalStyle()">
      <a-spin :spinning="confirmLoading">
        <task1-form
          @loading="loading"
          @dismiss="dismiss"
          @parentNext="parentNext"
          ref="collectionTask1"
          v-show="index===0">
        </task1-form>
        <task2-form
          @loading="loading"
          @dismiss="dismiss"
          @parentNext1="parentNext1"
          ref="collectionTask2"
          v-show="index===1">
        </task2-form>
        <concept-map-form
          @loading="loading"
          @dismiss="dismiss"
          @handleCancel="handleCancel"
          ref="collectionMap"
          v-show="index>1">
        </concept-map-form>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { register } from '@/utils/drag_modal'
import Task1Form from '@/views/main/knowl/collection-task/task1From'
import Task2Form from '@/views/main/knowl/collection-task/task2Form'
import ConceptMapForm from '@/views/main/knowl/collection-task/conceptMapForm'
import { catchTaskDetail } from '@/api/modular/main/knowl/catchtask_config/catchTaskConfigManager'

export default {
  components: { ConceptMapForm, Task1Form, Task2Form },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      title: '',
      id: undefined,
      index: 0,
      nextText: ''
    }
  },

  watch: {
    index(newIndex, _) {
      this.nextText = newIndex > 1 ? '保存' : '下一步'
    }
  },
  methods: {
    modalHeight() {
      return (document.body.clientHeight * 0.8) + 'px'
    },
    modalStyle() {
      return {
        'overflow-y': 'overlay',
        'overflow-x': 'hidden',
        'height': '100%',
        'max-height': '100%',
        'padding-right': '9px'
      }
    },
    loading() {
      this.confirmLoading = true
    },
    dismiss() {
      this.confirmLoading = false
    },
    modalWidth() {
      return document.body.clientWidth * 0.5
    },
    // 初始化方法
    add() {
      this.id = undefined
      this.title = '添加采集任务'
      this.nextText = '下一步'
      this.index = 0
      this.visible = true
      register(true)
      const task1 = this.$refs.collectionTask1
      if (task1) {
        task1.onInit()
      }
    },
    // 编辑
    edit(item) {
      this.id = item.id
      this.title = '编辑数据源'
      this.nextText = '下一步'
      this.visible = true
      this.index = -1
      register(true)
      this.loadDetail(item.id)
    },
    loadDetail(id) {
      this.loading()
      catchTaskDetail({ 'id': id })
        .then((res) => {
          if (res.success) {
            const data = res.data
            this.$refs.collectionTask1.setDetail(data)
            this.$refs.collectionTask2.setDetail(data)
            this.$refs.collectionMap.setDetail(data)
            this.index = 0
            this.$refs.collectionTask1.edit()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((e) => {
          console.log(e)
        }).finally(() => {
        this.dismiss()
      })
    },
    parentNext1(data) {
      this.index += 1
      this.title = this.id ? '编辑概念属性映射' : '概念属性映射'
      this.$refs.collectionMap.setResponseValue(data)
      this.$refs.collectionMap.onInit()
    },
    parentNext(data) {
      this.$emit('ok', {})
      this.index += 1
      this.$refs.collectionTask2.setResponseValue(data)
      this.$refs.collectionTask2.onInit()
    },
    next() {
      if (this.index < 0) {
        return
      }
      if (this.index === 0) {
        this.$refs.collectionTask1.saveOrUpdate(this.id)
      } else if (this.index === 1) {
        this.$refs.collectionTask2.saveOrUpdate(this.id)
      } else {
        this.$refs.collectionMap.saveOrUpdate(this.id)
      }
    },
    handleCancel() {
      this.id = undefined
      const task1 = this.$refs.collectionTask1
      if (task1) {
        task1.dispose()
      }
      const task2 = this.$refs.collectionTask2
      if (task2) {
        task2.dispose()
      }
      const mapTask = this.$refs.collectionMap
      if (mapTask) {
        mapTask.dispose()
      }
      register(false)
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0;
  background-color: rgba(240, 240, 240, 1);
}
</style>
